import ComEchart from '../../common/ComEchart';
import {  WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
class EcontentItem extends React.Component {


  //跳转至查询流程页
  openPage = (data) => { 
    let url = '/spa/workflow/index_mobx.jsp#/main/workflow/queryFlowResult?';
    switch(data.type){
      case('bereject'): {
        url+='rejectType=0&rejectTime=' + data.timeRange + '&notneedTab=1';
      }; break;
      case('reject'): {
        url+='rejectType=1&rejectTime=' + data.timeRange + '&notneedTab=1';
      }; break;
    }
    window.open(url, '_blank')
  }

  render() {
    const { data, index } = this.props;
    let formatter = `${getLabel('517666','退回率')}\n  ${data.percent}`
    let unRejectNum = 0;
    let option = {
      graphic: {
        type: 'text', 
        top: 'center',              
        left: 'center',            
        style: {
            text: formatter,       
            fill: '#484a4d',  
            fontSize: 12, 
            lineHeight: 12,          
        }
      },
      series: [
          {
              name: getLabel( 516702, '退回统计'),
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              animation: false,
              label:{show: false},
              data: []
          }
      ]
    };
    if(data.count != 0) {
      let parcentStr = data.percent.slice(0, data.percent.indexOf('%'));
      if(Number(parcentStr)) {
        unRejectNum = (data.count/(Number(parcentStr)/100)).toFixed() - data.count;
        option.series[0].data.push( {value: data.count, ...data}, {value: unRejectNum, ...data});
        if(index %2 == 0) {
          option.series[0].color = ['rgba(55,177,255, 0.8)', 'rgba(128, 128, 128, 0.4)'];
        } else  {
          option.series[0].color = ['rgba(179,123,250, 0.8)', 'rgba(128, 128, 128, 0.4)'];
        }
      } else {
        option.series[0].data.push({value: data.count, ...data});
        option.series[0].color = [ 'rgba(128, 128, 128, 0.4)'];
      }
    } else  {
      option.series[0].data.push({value: data.count, ...data});
      option.series[0].color = [ 'rgba(128, 128, 128, 0.4)'];
    }
   
    return ( 
      <div className='ele-item' >
        <div className='ele-item-hd'>
          <p>{data.title}</p>
          <p className='number' style={{color: option.series[0].color[0]}} onClick={this.openPage.bind(this,data)}>{data.count}</p>
        </div>
        <div className='echart-area' onClick={this.openPage.bind(this, data)}>
            <ComEchart ecId={`${this && this.props && this.props.ecId || ''}_ComEchart@zpnq2b`} 
              origin={'returnedChart'}
              useDefault={true}
              option={option} 
              style={{width: '175px', height: '175px'}}
            />
        </div>
      </div>
    ) 
  }
}
export default EcontentItem;



